<template>
    <div class="tabs-pane" v-if="active">
        <slot></slot>
    </div>
</template>

<script lang="ts">
  import Vue from "vue";
  import {Component,Inject,Prop} from "vue-property-decorator";

  @Component
  export default class TabsPane extends Vue {
    @Prop({type:String,required:true}) name:string;
    @Inject() readonly eventBus;
    active:boolean=false;
    created(){
      this.eventBus.$on('update:selected-nav',(tabName)=>{
        return this.active=this.name===tabName
      })
    }

  }
</script>

<style lang="scss" scoped>
.tabs-pane{
    padding: 1em;
}
</style>